<template>
	<view>
		<view class="bg-white p-4">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="申请合同" name="first">
					<el-tabs v-model="activeType" type="card" @tab-click="SelectType">
						<el-tab-pane label="全部" name="first"></el-tab-pane>
						<el-tab-pane label="审核中" name="second"></el-tab-pane>
						<el-tab-pane label="已通过" name="third"></el-tab-pane>
						<el-tab-pane label="未通过" name="fourth"></el-tab-pane>
					</el-tabs>
					<el-table :data="ApplyFinancing" border style="width: 100%">
						<el-table-column align="center" prop="Order_Financing_SerialNumber" label="融资编号">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Order_Financing_SerialNumber" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Order_Financing_SerialNumber}}</text>
									</view>
								 </el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" label="商品价格">
							<template v-slot="{row}">
								<text>￥{{row.Unit_Price}}</text>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Order_Financing_Quantity" label="申请数量">
						</el-table-column>
						<el-table-column align="center" label="付款时间">
							<template v-slot="{row}">
								<text>{{row.Repayment_Date}}天</text>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Application_Date" label="申请时间">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Application_Date" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Application_Date}}</text>
									</view>
								 </el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Row_Status" label="申请状态">
							<template v-slot="{row}">
								<text v-if="row.Row_Status==0">审核中</text>
								<text v-else-if="row.Row_Status==1">已通过</text>
								<text v-else>未通过</text>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template v-slot="{row}">
								<view class="flex justify-center">
									<el-button @click="goDetail(row.Order_Financing_SerialNumber)"
										v-if="row.Row_Status==1" type="primary" size="small">查看详情</el-button>
									<el-button @click="lookReason(row.Order_Financing_SerialNumber)"
										v-if="row.Row_Status==2" type="primary" size="small">查看原因</el-button>
								</view>
							</template>
						</el-table-column>
					</el-table>
					<view v-if="total!=0" class="flex py-2" style="justify-content: space-between;">
						<view class="">

						</view>
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="form.page" :page-sizes="[3,5,10,20]" :page-size="form.limit"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</view>
				</el-tab-pane>
				<el-tab-pane label="合同管理" name="second">
					<el-table :data="ContractDatas" border style="width: 100%">
						<el-table-column align="center" prop="Enterprise_Name" label="公司名称">
						</el-table-column>
						<el-table-column align="center" prop="Group_Purchasing_Name" label="商品名称">
						</el-table-column>
						<el-table-column align="center" prop="Interest_Rate" label="利率">
						</el-table-column>
						<el-table-column align="center" prop="Order_Financing_Name" label="申请人">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Order_Financing_Name" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Order_Financing_Name}}</text>
									</view>
								 </el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Order_Financing_Phone" label="申请人电话">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Order_Financing_Phone" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Order_Financing_Phone}}</text>
									</view>
								 </el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Order_Financing_Quantity" label="申请数量">
						</el-table-column>
						<el-table-column align="center" prop="Row_Status" label="还款日期">
							<template v-slot="{row}">
								<text>{{row.Repayment_Date}}天</text>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Unit_Price" label="单价">
						</el-table-column>
						<el-table-column align="center" prop="Unit_Quantity" label="单位数量">
						</el-table-column>
						<el-table-column align="center" prop="Row_Status" label="状态">
							<template v-slot="{row}">
								<text v-if="row.Row_Status==0">待确认</text>
								<text v-else-if="row.Row_Status==1">待平台买货</text>
								<text v-else-if="row.Row_Status==2">待平台买货</text>
								<view v-if="row.Row_Status==3" class="flex justify-center">
									生效中{{comParetime(row.End_Date)}}
									<view class="bg-danger font-small text-white">
										{{lateTime}}
									</view>
								</view>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template v-slot="{row}">
								<view v-if="row.Row_Status==0" class="flex justify-between">
									<el-button :loading="loading" @click="update(row,0)" type="primary"
										size="small">同意</el-button>
									<el-button :loading="loading" @click="update(row,1)" type="danger"
										size="small">拒绝</el-button>
								</view>
								<view v-if="row.Row_Status==3" class="flex justify-between">
									<el-button type="primary" size="small">申请提货</el-button>
									<el-button type="danger" size="small">查看提货记录</el-button>
								</view>
							</template>
						</el-table-column>
					</el-table>
					<view v-if="total1!=0" class="flex py-2" style="justify-content: space-between;">
						<view class="">

						</view>
						<el-pagination background @size-change="handleSizeChange1"
							@current-change="handleCurrentChange1" :current-page="form1.page" :page-sizes="[3,5,10,20]"
							:page-size="form1.limit" layout="total, sizes, prev, pager, next, jumper" :total="total1">
						</el-pagination>
					</view>
				</el-tab-pane>
			</el-tabs>
		</view>
		<el-dialog title="详情" :center="true" :visible.sync="dialogTableVisible">
			<el-table border style="width: 100%" :data="Concat">
				<el-table-column align="center" property="Order_Financing_Name" label="申请人企业名称"></el-table-column>
				<el-table-column align="center" property="Order_Financing_Phone" label="申请人手机号"></el-table-column>
				<el-table-column align="center" property="Order_Financing_Quantity" label="申请数量"></el-table-column>
				<el-table-column align="center" property="Quantity_Remain" label="剩余数量"></el-table-column>
				<el-table-column align="center" property="Unit_Price" label="价格"></el-table-column>
				<el-table-column align="center" property="Interest_Rate" label="利率"></el-table-column>
			</el-table>
		</el-dialog>
	</view>
</template>

<script>
	const app = getApp()
	import times from '@/static/js/utils.js'
	import {
		Message,
		MessageBox
	} from "element-ui"
	import {
		getOrderFinancingAll,
		getFinancingContractAll,
		getRefuseIDAction
	} from "@/api/group.js";
	import {
		getEditAction,
		getInquiryIDOriginal,
		getInquiryIDAction
	} from "@/api/global.js"
	export default {
		data() {
			return {
				tab:0,
				lateTime: '',
				dialogTableVisible: false,
				form: {
					type: '',
					page: 1,
					limit: 4,
					token: uni.getStorageSync('loginInfo').token,
				},
				form1: {
					type: '',
					page: 1,
					limit: 4,
					token: uni.getStorageSync('loginInfo').token,
				},
				loading: false,
				total: 0,
				total1: 0,
				ApplyFinancing: [],
				ContractDatas: [],
				activeName: 'first',
				activeType: 'first',
				Reason: {},
				Concat: []
			};
		},
		mounted() {
			this.getList(this.form)
		},
		methods: {
			comParetime(time) {
				this.lateTime = times.compareTime(time)
			},
			handleClick(tab, event) {
				if (tab.index == 1) {
					this.form1.page = 1
					this.getList1(this.form1)
				} else {
					this.form.page = 1
					this.getList(this.form)
				}
			},
			SelectType(tab) {
				if(this.tab == tab.index){
					return
				}
				this.tab = tab.index
				if (tab.index == 0) {
					this.form.type = ''
					this.getList(this.form)
				} else {
					this.form.type = tab.index - 1
					this.getList(this.form)
				}
			},
			async getList(data) {
				const res = await getOrderFinancingAll({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else if (res.Status == 'success') {
					this.ApplyFinancing = res.tableData
					console.log(res)
					this.total = Number(res.limit)
				}
			},
			async getList1(data) {
				const res = await getFinancingContractAll({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else if (res.Status == 'success') {
					this.ContractDatas = res.tableData
					console.log(this.ContractDatas)
					this.total1 = Number(res.limit)
				}
			},
			handleCurrentChange(e) {
				this.form.page = e
				this.getList(this.form)
			},
			handleSizeChange(e) {
				this.form.page = 1
				this.form.limit = e
				this.getList(this.form)
			},
			handleCurrentChange1(e) {
				this.form1.page = e
				this.getList1(this.form1)
			},
			handleSizeChange1(e) {
				this.form1.page = 1
				this.form1.limit = e
				this.getList1(this.form1)
			},
			async update(row, i) {
				this.loading = true
				let data = {
					Data: 'order_financing_contract',
					Primary_Key_Name: 'Order_Financing_Contract_SerialNumber',
					Primary_Key: row.Order_Financing_Contract_SerialNumber,
				}
				const res = await getInquiryIDOriginal({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				let message = ''
				res[0].Row_Status = i + 1
				let Data = {
					Data: JSON.stringify({
						Modify: {
							order_financing_contract: res
						}
					}),
					token: uni.getStorageSync('loginInfo').token,
				}
				if (i == 0) {
					message = '已同意'
				} else {
					message = '已拒绝'
				}
				console.log(Data)
				this.Updaterow(Data, message)
			},
			async Updaterow(data, message) {
				this.loading = false
				const res = getEditAction({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				Message({
					type: 'success',
					message
				})
				this.getList1(this.form1)
			},
			async goDetail(Primary_Key) {
				let data = {
					Data: 'order_financing_contract',
					Primary_Key_Name: 'Order_Financing_SerialNumber',
					Primary_Key
				}
				const res = await getInquiryIDAction({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				console.log(res)
				this.Concat = res
				this.dialogTableVisible = true
			},
			async lookReason(Order_Financing_SerialNumber) {
				let data = {
					Order_Financing_SerialNumber
				}
				const res = await getRefuseIDAction({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else if (res.Status == 'success') {
					MessageBox(`拒绝原因:${res.Data[0].Reason}`, '拒绝原因', {
						confirmButtonText: '确定',
						callback: action => {
							Message({
								type: 'info',
								message: `action: ${ action }`
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 30rpx;

		background-color: #fff;

		.el-form {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>